<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script type="text/javascript" src="lib/vue-2.6.10.js"></script>
<body>
	<div id="app">
		<h1>{{ title }}</h1>

	
		
		<p v-html="colorFunc(str,'yellow')"></p>	
		<p v-html="colorFunc(str)"></p>	
	
	</div>
	<script type="text/javascript">
	
		Vue.prototype.colorFunc = function(content,c='red'){
			return '<span style="color:'+c+'">'+content+'</span>';
		}


		Vue.filter('colorFilter',function(vals){
			return '<span style="color:red">'+vals+'</span>';			
		});
	
		const vm = new Vue({
			el:"#app",
			data:{
				title:'带有参数的模板过滤器',
				str:'i love you ..'
			
			},
			
		})

	</script>
</body>
</html>